<template>
	<view>
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList">
			<view slot="top">
				<cu-custom :isBack="true" :bgColor="'headerColor'" :backColor="'text-white'">
					<block slot="backText">
						<view class="text-white ">
							我的收入明细
						</view>
					</block>
				</cu-custom>
				<view class="balance flex flex-direction justify-around" style="padding: 70rpx 0;">
					<view class="text-df text-white">消费总人数</view>
					<view class="text-xxl text-bold">{{consum_count}}</view>
				</view>
				<scroll-view scroll-x class="bg-white nav">
					<view class="flex text-center">
						<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
							v-for="(item,index) in ['收入记录','提现记录']" :key="index" @click="tabSelect"
							:data-id="index">
							{{item}}
						</view>
					</view>
				</scroll-view>
				<view class="">
					<view v-show="TabCur===0" class="flex justify-between padding-lr-lg padding-tb-sm text-sm">
						<view>剧本名</view>
						<view>金额</view>
						<view>平台消费人数</view>
						<view>时间</view>
					</view>
					<view v-show="TabCur===1" class="flex justify-between padding-lr-lg padding-tb-sm text-sm">
						<!-- <view>充值金额</view> -->
						<view>提现金额</view>
						<view>提现时间</view>
					</view>
				</view>
			</view>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
			<view class="list bg-white" v-if="TabCur===0">
				<view  v-for="(item,index) in dataList" :key="index" @click="itemClick(item)" >
					<view class="item flex justify-between solid-bottom" >
						<!-- <view class="cu-avatar radius12" :style="'background-image: url('+$isHttp(item.playPicture)+')'"></view> -->
						<view class="text-cut" style="width: 160rpx;">{{item.orderName}}</view>
						<view class="text-red text-bold">{{item.money}}</view>
						<!-- <view class="text-green text-bold">{{item.pay_type===0?'余额':'微信'}}</view> -->
						<view class="text-green text-bold">{{item.count}}</view>
						<view class="text-center">
							<!-- {{item.time}} -->
							<view>{{item.time.split(' ')[0]}}</view>
							<view>{{item.time.split(' ')[1]}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list bg-white" v-if="TabCur===1">
				<view  v-for="(item,index) in dataList" :key="index" @click="itemClick(item)" >
					<view class="item flex justify-between solid-bottom">
						<view class="text-green text-bold">{{item.money}}</view>
						<view class="text-center">
							<!-- {{item.creationTime}} -->
							<view>{{item.creationTime.split(' ')[0]}}</view>
							<view>{{item.creationTime.split(' ')[1]}}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
		mixins: [ZPagingMixin],
		data() {
			return {
				dataList: [],
				TabCur: 0,
				consum_count:'',
			}
		},
		onLoad(option) {
			if(option.select){
				this.TabCur=option.select
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				this.$u.adminApi.FundRecord({
					storeId:this.vuex_bussinessId,
					page:pageNo,
					number:pageSize,
					select:this.TabCur  //收入记录  1 提现记录
				}).then(res=>{
					if(res.code===200){
						if(this.TabCur==0){
							this.consum_count=res.data.consum_count
							this.$refs.paging.complete(res.data.list);
						}else{
							this.$refs.paging.complete(res.data);
						}
						
					}
				})
			},
			itemClick(item) {
				console.log('点击了', item.title);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.balance{
		color: #fff;
		text-align: center;
		height: 370rpx;
		width: 100%;
		background-color: #24B360;
	}
	.item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
</style>
